<template>
  <!--首页汇总-->
  <div class="contentRight" style="background-color: #f0f2f5;" id="contentRight">
    <a-row type="flex" class="marginBottom" style="width: 100%;flex-wrap: nowrap;" id="toprow">
      <!--第一排左侧-->
      <a-col flex="60%" style="background-color: #fff">
        <a-card size="small" title="安亭基地" :bordered="false">
          <!--可选择基地下拉菜单-->
          <!--<template slot="extra">-->
            <!--<a-dropdown>-->
              <!--<a  class="ant-dropdown-link menuA">-->
                <!--{{antingAreaName}}<a-icon type="down" />-->
              <!--</a>-->
              <!--<a-menu slot="overlay" @click="handleClick">-->
                <!--<a-menu-item class="menuA" v-for="item in aningAreaAll" :key="item.id" :value="item.areaName">-->
                  <!--{{item.areaName}}-->
                <!--</a-menu-item>-->
              <!--</a-menu>-->
            <!--</a-dropdown>-->
          <!--</template>-->
        </a-card>

        <!--地图-->
        <div class="divbox" style="top: 30px;">
          <div class="mapflex flex" style="width: 90%;">
            <!--<div class="baseMapAnting"></div>-->
            <img style="height: 90%;max-width: 550px;"  :src="baseMap" alt="" onerror="this.src='https://digitalsecurity.oss-cn-hangzhou.aliyuncs.com/visit/static/img/noImg.png';this.onerror=null">
          </div>
        </div>
      </a-col>

      <a-col flex="10px"></a-col>
      <!--第一排右侧-->
      <a-col flex="auto" >
        <a-card size="small" title="门禁实时监控" :bordered="false">
          <div style="min-height: 430px">
          <!--照片-->
          <a-row :gutter="10">
            <a-col :span="12">
              <div class="flex4">
                <p>档案照片</p>
                <div class="photoBox flex">
                  <img style="width: 100%;"  :src="userInfo.photoPath" alt="" onerror="this.src='https://digitalsecurity.oss-cn-hangzhou.aliyuncs.com/visit/static/img/noImg.png';this.onerror=null">
                </div>

              </div>
            </a-col>
            <a-col :span="12">
                <div class="flex4">
                  <p>人脸识别照片</p>
                  <div class="photoBox flex">
                    <!--<img style="width: 100%;"  src="https://digitalsecurity.oss-cn-hangzhou.aliyuncs.com/visit/static/img/logo.png" alt="">-->
                    <img style="width: 100%;"  :src="userInfo.facePath" alt="" onerror="this.src='https://digitalsecurity.oss-cn-hangzhou.aliyuncs.com/visit/static/img/noImg.png';this.onerror=null">
                  </div>
                </div>
            </a-col>
          </a-row>

          <div style="height: 20px"></div>

          <a-descriptions  bordered size="small" :column="2">
            <a-descriptions-item label="姓名">
              {{userInfo.userLname}}
            </a-descriptions-item>
            <a-descriptions-item label="工号">
              {{userInfo.userNo}}
            </a-descriptions-item>
            <a-descriptions-item label="部门">
              {{userInfo.depName}}
            </a-descriptions-item>
            <a-descriptions-item label="刷卡时间">
              {{userInfo.jlSj}}
            </a-descriptions-item>
            <a-descriptions-item label="设备名称">
              {{userInfo.mc}}
            </a-descriptions-item>
            <a-descriptions-item label="设备编号">
              {{userInfo.bh}}
            </a-descriptions-item>
          </a-descriptions>

          <!--<a-divider style="margin: 20px 0"/>-->

          <!--<a-row :gutter="10">-->
            <!--<a-col :span="12">-->
              <!--<a-card size="small"  style="text-align: center;">-->
                <!--<div class="flex">-->
                  <!--<span class="span-round" style="background-color: #00893d;"></span>-->
                  <!--<a-statistic-->
                    <!--title="在线设备"-->
                    <!--:value="onlineDevice"-->
                    <!--suffix="台"-->
                    <!--class="classDevice"-->
                  <!--&gt;-->
                  <!--</a-statistic>-->
                <!--</div>-->
              <!--</a-card>-->
            <!--</a-col>-->
            <!--<a-col :span="12">-->
              <!--<a-card size="small"  style="text-align: center;">-->
                <!--<div class="flex">-->
                  <!--<span class="span-round" style="background-color: #FF0000;"></span>-->
                  <!--<a-statistic-->
                    <!--title="离线设备"-->
                    <!--:value="notOnlineDevice"-->
                    <!--suffix="台"-->
                    <!--class="classDevice"-->
                  <!--&gt;-->
                  <!--</a-statistic>-->
                <!--</div>-->
              <!--</a-card>-->
            <!--</a-col>-->
          <!--</a-row>-->

          </div>
        </a-card>

      </a-col>
    </a-row>

    <!--第二排-->
    <a-row  style="width: 100%">
      <a-col>
        <a-card size="small" title="刷卡记录" :bordered="false">
            <a-table
              class="tabled"
              bordered
              :fixed="true"
              :pagination="false"
              size="small"
              :row-key="record => record.bh + Math.random()"
              :columns="columns"
              :data-source="tableData"
              :loading="tableLoading"
              :scroll="{ y: yHeight }"
            >
            </a-table>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import reservationApi from "@/api/reservation";
import homeSummaryApi from "@/api/accessControlSystem/homeSummary";
import cfg from '@/config/config'

export default {
  components: {

  },
  name:'',
  data() {
    return {
      // 右上角人员信息
      userInfo: {
        userLname:"张磊",
        userNo:"1231321",
        depName:"施工部",
        jlSj:"2020-12-12 08:00:00",
        mc:"Cloud Database33",
        bh:"Cloud Database33",
        photoPath: require("@/assets/noImg.png"),   //档案照片
        facePath: require("@/assets/noImg.png"),   //档案照片
      },
      imgFile: require("@/assets/noImg.png"),   //档案照片
      imgFileMj: require("@/assets/noImg.png"),   //人脸识别照片
      baseMap: require("@/assets/baseMapAnting.jpg"),   //基地地图
      xWidth: "",
      yHeight: "",  //表格自定义高
      tableData: [], //底部表格数据
      columns: [],   //表格表头
      tableLoading: false,  //表格加载中
      pagination: {
        pageSize: 30,
        current: 1,
        total: 0,
        showSizeChanger: true,
        // showQuickJumper: true,
        pageSizeOptions: ["20", "30", "50"],
        showTotal: (total) => `共 ${total} 条`, // 显示总数
        onShowSizeChange: (current, pageSize) => {
          // console.log("1111");
          this.pagination.current = 1;
          this.pagination.pageSize = pageSize;
        },
      },
      loading1: false,
      aningAreaAll:[],
      antingAreaName:"办公区域",
      antingAreaId: "1",
      notOnlineDevice: 0 , //离线设备
      onlineDevice: 0 , //在线设备

      intervalId:null,   //定时器，定时刷新页面


    }
  },
  beforeMount(){
    this.columns = [
      {
        title: '序号',     //表头
        dataIndex: 'serialNumber',   //字段名称
        width: '50px',    //设列宽度
        align: 'center',  //居中显示
        className: 'changeBack',   //重置覆盖背景色为浅灰色，否则是白色的
        customRender: (value, row, index) => `${(this.pagination.current - 1) * this.pagination.pageSize + index + 1}`  //设置动态序号
      },
      {
        title: '工号',
        dataIndex: 'userNo',
        width: '100px',
        align: 'center',
        className: 'changeBack'
      },
      {
        title: '姓名',
        dataIndex: 'userLname',
        width: '100px',
        align: 'center',
        className: 'changeBack'
      },
      {
        title: '部门',
        dataIndex: 'depName',
        width: 'auto',
        align: 'center',
        className: 'changeBack'
      },
      {
        title: '刷卡时间',
        dataIndex: 'jlSj',
        width: '180px',
        align: 'center',
        className: 'changeBack'
      },
      {
        title: '设备名称',
        dataIndex: 'mc',
        width: 'auto',
        align: 'center',
        className: 'changeBack',
        ellipsis: true,   //此属性可以让单元格内容根据宽度自动省略
      },
      {
        title: '设备编号',
        dataIndex: 'bh',
        width: '150px',
        align: 'center',
        className: 'changeBack'
      },{
        title: '方向',
        dataIndex: 'fx',
        width: '80px',
        align: 'center',
        className: 'changeBack'
      },
      {
        title: '识别方式',
        dataIndex: 'jlType',
        width: '120px',
        align: 'center',
        className: 'changeBack'
      },
    ];

    this.tableData = [
      // {userNo: 234443, userLname: "张三",deptName: "软件部",swipeTime: "2020-12-12 8:00:00",deviceName: "北门1",deviceNo: 822388248322,direction: "进",identifyManner: "刷卡",},
      // {userNo: 234443, userLname: "张三",deptName: "软件部",swipeTime: "2020-12-12 8:00:00",deviceName: "北门1",deviceNo: 822388248322,direction: "进",identifyManner: "刷卡",},
      // {userNo: 234443, userLname: "张三",deptName: "软件部",swipeTime: "2020-12-12 8:00:00",deviceName: "北门1",deviceNo: 822388248322,direction: "进",identifyManner: "刷卡",},
      // {userNo: 234443, userLname: "张三",deptName: "软件部",swipeTime: "2020-12-12 8:00:00",deviceName: "北门1",deviceNo: 822388248322,direction: "进",identifyManner: "刷卡",},
      // {userNo: 234443, userLname: "张三",deptName: "软件部",swipeTime: "2020-12-12 8:00:00",deviceName: "北门1",deviceNo: 822388248322,direction: "进",identifyManner: "刷卡",},
      // {userNo: 234443, userLname: "张三",deptName: "软件部",swipeTime: "2020-12-12 8:00:00",deviceName: "北门1",deviceNo: 822388248322,direction: "进",identifyManner: "刷卡",},
      // {userNo: 234443, userLname: "张三",deptName: "软件部",swipeTime: "2020-12-12 8:00:00",deviceName: "北门1",deviceNo: 822388248322,direction: "进",identifyManner: "刷卡",},
      // {userNo: 234443, userLname: "张三",deptName: "软件部",swipeTime: "2020-12-12 8:00:00",deviceName: "北门1",deviceNo: 822388248322,direction: "进",identifyManner: "刷卡",},
      // {userNo: 234443, userLname: "张三",deptName: "软件部",swipeTime: "2020-12-12 8:00:00",deviceName: "北门1",deviceNo: 822388248322,direction: "进",identifyManner: "刷卡",},
      // {userNo: 234443, userLname: "张三",deptName: "软件部",swipeTime: "2020-12-12 8:00:00",deviceName: "北门1",deviceNo: 822388248322,direction: "进",identifyManner: "刷卡",},
      // {userNo: 234443, userLname: "张三",deptName: "软件部",swipeTime: "2020-12-12 8:00:00",deviceName: "北门1",deviceNo: 822388248322,direction: "进",identifyManner: "刷卡",},
    ];

  },
  created(){
    this.dataRefreh();
  },
  destroyed(){
    // 在页面销毁后，清除计时器
    this.clear();
  },
  mounted() {
    let Height = window.innerHeight;
    let toprowHeight = document.getElementById("toprow").offsetHeight; //刷卡记录上面的总高
    this.yHeight = Height - toprowHeight - 105 - 64 - 22;    //有分页的话最后一个减80，没有分页减22
    this.loadDataRegularly();
  },
  methods: {
    // 获取安亭基地的区域
    async getAntingAreaList(){
      let res = await reservationApi.getVisitorTypeAreaList({typeId: 100})
      // console.log(res.data);
      if (res.data.success){
        this.aningAreaAll = res.data.result;
        // console.log(this.aningAreaAll);
      } else {
        this.$message.error(res.data.message);
      }

    },

    // 定时刷新数据函数
    dataRefreh() {
      // 计时器正在进行中，退出函数
      if (this.intervalId != null) {
        return;
      }
      // 计时器为空，操作
      this.intervalId = setInterval(() => {
        // console.log("刷新" + new Date());
        this.loadDataRegularly();
      }, 30000);
    },
    // 停止定时器
    clear() {
      clearInterval(this.intervalId); //清除计时器
      this.intervalId = null; //设置为null
    },

    // 安亭基地切换区域
    async handleClick(e) {
      // console.log(e)
      this.antingAreaName = e.item.value;
      this.antingAreaId = e.key;
      await this.getAntingVisitCase();

    },

    // 定时加载数据
     loadDataRegularly() {
       this.getUserMjList();
       this.getUserMj();
       // this.getDeviceOnline();
    },
    // 获取刷卡记录
    async getUserMjList() {
      this.tableLoading = true;
      let resp = await homeSummaryApi.getUserMjList();
      console.log(resp.data);
      if (resp.data.success) {
        this.tableLoading = false;
        this.tableData = resp.data.result;

      } else {
        this.tableLoading = false;
        this.$message.error(resp.data.message);
      }
    },
    // 获取最后一个门禁刷脸照片
    async getUserMj() {
      let resp = await homeSummaryApi.getUserMj();
      console.log(resp.data.result);
      if (resp.data.success) {
        this.userInfo = resp.data.result;
        // facePath是打卡照片，photoPhoto是档案照片
        // this.imgFile = resp.data.result.photoPath;
        // this.imgFileMj = resp.data.result.facePath;
      } else {
        this.$message.error(resp.data.message);
      }
    },

    // 获取监控设备信息
    async getDeviceOnline() {
      let resp = await homeSummaryApi.getDeviceOnline();
      console.log(resp.data.result);
      if (resp.data.success) {
        resp.data.result.forEach((v, i) => {
          // eslint-disable-next-line eqeqeq
          if (v.onlineState == 2) {
            // 离线设备
            this.notOnlineDevice = v.value
          }
          // eslint-disable-next-line eqeqeq
          if (v.onlineState == 1) {
            // 在线设备
            this.onlineDevice = v.value
          }
        })
        // this.userInfo = resp.data.result;
        // this.imgFile = cfg.apiUrl + resp.data.result.photoPath;
      } else {
        this.$message.error(resp.data.message);
      }
    }




  },
}
</script>
